<template>
	<view class="box padding">

		<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<!-- <u-form-item label-width="150" label="单据编号" borderBottom ref="item1">
				<u-input v-model="model.code"></u-input>
			</u-form-item> -->
			<u-form-item label-width="220" label="销售单据">
				<u-input :border="border" :disabled="true" v-model="model.sell_code" placeholder="请选择销售单据"></u-input>
			</u-form-item>
			<u-form-item label-width="220" label="客户名称">
				<u-input :border="border" :disabled="true" v-model="model.customer_name" placeholder="请选择客户"></u-input>
			</u-form-item>

			<u-form-item label-width="150" label="联系人" borderBottom ref="item1">
				<u-input v-model="model.linkman" placeholder="请输入联系人"></u-input>
			</u-form-item>
			<u-form-item label-width="150" label="联系人方式" borderBottom ref="item1">
				<u-input v-model="model.phone" placeholder="请输入联系方式"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="account" label-width="180"
				:label-position="labelPosition" label="交货日期">
				<u-input :border="border" type="select" :select-open="delivery_timeSheetShow" v-model="model.delivery_time"
					placeholder="请选择交货日期" @click="delivery_timeSheetShow = true"></u-input>
			</u-form-item>

			<u-form-item label-width="220" label="交货方式">
				<u-input :border="border" type="select" :select-open="SelectSendType" v-model="typemat[model.type]"
					placeholder="交货方式" @click="SelectSendType = true"></u-input>
			</u-form-item>

			<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="account" label-width="180"
				:label-position="labelPosition" label="制单时间">
				<u-input :border="border" type="select" :select-open="make_timeSheetShow" v-model="model.billing_time"
					placeholder="请选择制单时间" @click="make_timeSheetShow = true"></u-input>
			</u-form-item>



			<u-form-item :label-position="labelPosition" label="所在地区" label-width="150">
				<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.city" placeholder="请选择地区"
					@click="pickerShow = true"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="car" label-width="180"
				:label-position="labelPosition" label="详细地址">
				<u-input :border="border" placeholder="请输入详细地址" v-model="model.address" type="text"></u-input>
			</u-form-item>

			<!-- <u-form-item label-width="150" label="物流单号" borderBottom ref="item1">
				<u-input v-model="model1.form.orderNum" placeholder="请输入物流单号"></u-input>
			</u-form-item> -->
			<!-- <u-form-item borderBottom label-width="150" label="上传转款截图">
				<view class="zhuankuan flex flex-direction align-center">
					<view v-if="model1.form.imgurl == ''" class="bg" @click="choosePhoto"></view>
					<view v-else class="bgup">
						<view class="guan" @click="openDeleteImg">
							<u-icon color="red" size="30px" name="close-circle-fill"></u-icon>
						</view>
						<img @click="openImg" :src="model1.form.imgurl" alt="">
					</view>
				</view>
			</u-form-item> -->


			<!-- 商品卡片 -->
			<u-section class="mt20 mb12" title="商品信息" :right="false" :show-line="true"></u-section>

			<!-- <view v-if="model.product.length > 0"> -->
			<view class="mt4" v-for="(item, index) in model.product" :key="index">
				<u-card :title="item.info.name" :sub-title="'￥' + item.subtotal" margin='0rpx'>
					<view class="cardbox" slot="body">
						<view class="left">
							<view class="img_box">
								<img :src="item.url ? item.url : '/static/images/200.png'" alt="">
							</view>
						</view>
						<view class="right">
							<text class="title u-line-2"><text class="font-weight-bold">Sku：</text><text>{{ item.info.sku
							}}</text></text>
							<text class="title u-line-2"><text class="font-weight-bold">规格</text><text>{{ item.info.specification
							}}</text></text>
							<text class="title u-line-2"><text class="font-weight-bold">销售单价：</text><text>{{ item.price }}</text></text>
							<text class="title u-line-2"><text class="font-weight-bold">销售数量：</text><text>{{ item.nums }}</text></text>
							<text class="title u-line-2"><text class="font-weight-bold">单位：</text><text>{{ item.info.unit
							}}</text></text>
							<text class="title u-line-2"><text class="font-weight-bold">现有库存：</text><text>{{ item.info.inventory
							}}</text></text>
						</view>
						<view class="right">
							<text class="title u-line-2" @click="checkWh(item.product_id, item.id)"><text
									class="font-weight-bold">选择仓库</text>></text>
							<!-- <u-input :border="border" v-model="item.name" :disabled="true" placeholder="请选择仓库"
								></u-input> -->
							<text class="title u-line-2" @click="checkWh(item.product_id, item.id)"><text
									class="font-weight-bold">仓库:</text><text>{{
										item.name
										== undefined ? '请选择仓库' :
										item.name }}</text></text>
							<text class="title u-line-2"><text class="font-weight-bold">库区:</text><text>{{ item.p_name == undefined ?
								'请选择仓库' :
								item.p_name }}</text></text>
							<text class="title u-line-2"><text class="font-weight-bold">可用库存</text><text>{{ item.inventory
							}}</text></text>
							<text class="title u-line-2"><text class="font-weight-bold">备注：</text>
							</text>
							<u-input :border="border" v-model="item.remarks" type="textarea" :maxlength="100"
								placeholder="请输入备注"></u-input>
						</view>
					</view>
				</u-card>
			</view>

			<!-- </view> -->




			<view class="" style="margin-top: 20px;">
				<u-button @click="sendGood" type="primary">发货</u-button>
			</view>
		</u-form>
		<u-select mode="single-column" :list="orderList" v-model="SheetShow" @confirm="sheetConfirm"></u-select>
		<u-select mode="single-column" :list="sendType" v-model="SelectSendType" @confirm="SelectSendTypeConfirm"></u-select>
		<u-select mode="single-column" :list="sendUser" v-model="SelectUser" @confirm="SelectSenUserConfirm"></u-select>
		<u-calendar max-date="2050-01-01" v-model="delivery_timeSheetShow" mode="date" @change="delivery_timeChange"
			toolTip='交货时间'></u-calendar>

		<u-calendar max-date="2050-01-01" v-model="make_timeSheetShow" mode="date" @change="make_timeChange"
			toolTip='制单时间'></u-calendar>

		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>


		<u-toast ref="uToast" />
		<view class="mask" @click="showcard = false" v-show="showcard"></view>
		<view class="selectCard" v-show="showcard">
			<view class="guanx" @click="showcard = false">关闭</view>
			<view v-if="carddata.length > 0">
				<view class="selectCardItem" v-for="(item, index) in carddata" :key="index">
					<viwe class="item"><text>仓库：</text><text>{{ item.name }}</text></viwe>
					<viwe class="item"><text>库区：</text><text>{{ item.p_name }}</text></viwe>
					<viwe class="item"><text>可用库存：</text><text>{{ item.inventory }}</text></viwe>
					<view style="color: #3C9CFF;font-weight: 800;" @click="select_Card(item)">选择</view>
				</view>
			</view>
			<view v-else>没有库存了，请联系管理员...</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rawOrderData: {},//订单数据
			SheetShow: false,//销售单据选择
			SelectSendType: false,//交货方式
			SelectWh: false,//交货方式
			delivery_timeSheetShow: false,//时间选择
			make_timeSheetShow: false,//制单时间选择
			SelectUser: false,//用户选择
			pickerShow: false,//地区选择

			showcard: false,//库存选择

			cur_select_id: -1,//选择仓库当前点击的商品id
			sell_pro_id: -1,//当前行的id
			Wh: '广西地区',

			carddata: [],

			orderList: [
				{
					label: 'GD55464722',
					value: 0,
				}, {
					label: 'GD55464744',
					value: 1,
				}, {
					label: 'GD55464788',
					value: 2,
				}
			],
			typemat: ['', '买家自提', '卖方发货', '代发'],
			sendType: [
				{
					label: '买家自提',
					value: 1
				}, {
					label: '卖方发货',
					value: 2,
				}, {
					label: '代发',
					value: 3,
				}
			],
			sendUser: [
				{
					label: '王老五',
					value: 0,
				}, {
					label: '六大',
					value: 1,
				}, {
					label: '牛牛',
					value: 2,
				}
			],
			model: {
				sell_id: '',//销售单号
				code: '',//单据编号
				sell_code: '',//选择销售单据
				customer_name: '',//客户名称
				customer_info_id: "", //客户ID
				linkman: '',
				phone: '',
				delivery_time: '', //交货日期
				type: '',
				billing_time: '',//制单日期
				city: '',
				address: '',
				remark: '',
				totalNums: "", //产品数量
				product: [],//产品列表
			},
			showSex: false,//是否显示性别选择器
			showData: false,//是否显示日期选择器
			showProducer: false,//是否显示生产人员选择器

			//当前的类型
			type: '无三大件定制',


			columns: [
				['王师傅18878787878', '刘师傅18878787878', '吴师傅18878787878']
			],


			radiolist1: [{
				name: '无三大件定制',
				disabled: false
			},
			{
				name: '锂电池',
				disabled: false
			},
			{
				name: '其他',
				disabled: false
			},
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: '无三大件定制',

			model1: {
				form: {
					Nid: 'XDD20240124004',
					sex: '',
					data: '2024-01-24',
					name: '',//用户名称
					phone: '',//电话
					address: '',//地址
					describe: '',//描述
					producer: '',//生产人
					goods: [
						{
							name: '不让他呢GT403 钢1',
							hh: '货号：GTD456774',
							gg: '规格：80*30*0.12',
							prize: '￥457',
							danwei: '单位/对',
							num: '数量1'
						},
						{
							name: '而被认为GT403 钢2',
							hh: '货号：GTD456774',
							gg: '规格：80*30*0.12',
							prize: '￥457',
							danwei: '单位/对',
							num: '数量1'
						},
						{
							name: '老鹰卡钳GT403 钢3',
							hh: '货号：GTD456774',
							gg: '规格：80*30*0.12',
							prize: '￥457',
							danwei: '单位/对',
							num: '数量1'
						}
					],//商品
					isAssemble: false,//true组装 false不组装
					ismoney: false,//true全款 false定金
					post: false,//true包邮 false到付
					money: '8999.8',//金额
					imgurl: '',//转款截图
					notes: '',//备注


					// 锂电的情况
					load: '',//容量
					model: '',//车型
					proboard: '',//保护板
					deposit: '',//定金

					//无三大定制化的情况
					jzcolor: '',//减震颜色
					kqcolor: '',//卡钳颜色
					lgcolor: '',//轮毂颜色
					ckcolor: '',//车壳颜色
				},
			},

			rules: {
				'form.Nid': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'form.data': {
					type: 'string',
					required: true,
					message: '请选择日期',
					trigger: ['blur', 'change']
				},
				'form.orderNum': {
					type: 'string',
					required: true,
					message: '请填写物流单号',
					trigger: ['blur', 'change']
				},
				'form.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'form.address': {
					type: 'string',
					required: true,
					message: '请填写地址',
					trigger: ['blur', 'change']
				},
				'form.phone': {
					type: 'string',
					required: true,
					message: '请填写手机号',
					trigger: ['blur', 'change']
				},
				'form.producer': {
					type: 'string',
					required: true,
					message: '请填写生产人',
					trigger: ['blur', 'change']
				},
				'form.goods': {
					type: 'string',
					required: true,
					message: '请填写商品',
					trigger: ['blur', 'change']
				},
				'form.goods': {
					type: 'string',
					required: true,
					message: '请上传转款截图',
					trigger: ['blur', 'change']
				},
				'form.load': {
					type: 'string',
					required: true,
					message: '请输入容量',
					trigger: ['blur', 'change']
				},
				'form.model': {
					type: 'string',
					required: true,
					message: '请输入车型',
					trigger: ['blur', 'change']
				},
				'form.proboard': {
					type: 'string',
					required: true,
					message: '请输入保护板',
					trigger: ['blur', 'change']
				},
				'form.deposit': {
					type: 'string',
					required: true,
					message: '请输入定金',
					trigger: ['blur', 'change']
				},




			},
			radio: '',
			switchVal: false
		};
	},
	onLoad(options) {
		this.getOrderList(options.id);
		// var currentDate = new Date();
		// // 获取年、月、日
		// var year = currentDate.getFullYear();
		// var month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1
		// var day = ('0' + currentDate.getDate()).slice(-2);
		// // 格式化输出
		// var formattedDate = year + '-' + month + '-' + day;
		// this.model.billing_time = formattedDate
		// console.log('%c [ this.model.billing_time ]-319', 'font-size:13px; background:pink; color:#bf2c9f;', this.model.billing_time)

	},
	methods: {
		sendGood() {
			console.log(this.model)
			this._post_json('api/ykjp/sell/Deliverymy/newAdd', this.model, (res) => {
				console.log('%c [ res ]-406', 'font-size:13px; background:pink; color:#bf2c9f;', res)
				if (res.code = 1) {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						mask: true
					})
				}
			})
		},
		select_Card(item) {
			console.log('执行了');
			console.log('%c [ item ]-402', 'font-size:13px; background:pink; color:#bf2c9f;', item)
			console.log('%c [ this.cur_select_id ]-406', 'font-size:13px; background:pink; color:#bf2c9f;', this.cur_select_id)

			this.model.product.forEach(i => {
				if (i.product_id == this.cur_select_id) {
					console.log('找到了');
					console.log('%c [ i.id ]-408', 'font-size:13px; background:pink; color:#bf2c9f;', i.id)
					i.name = item.name
					i.p_name = item.p_name
					i.wp_id = item.id
					i.sell_pro_id = this.sell_pro_id
					i.inventory = item.inventory
				}
			});
			console.log('%c [ 	this.model.product ]-408', 'font-size:13px; background:pink; color:#bf2c9f;', this.model.product)
			this.showcard = false

			//选择仓库
		},
		checkWh(product_id, sell_pro_id) {
			this.cur_select_id = product_id//当前点击的商品id
			this.sell_pro_id = sell_pro_id
			this._post_form('/api/ykjp/sell/Deliverymy/getWP', {
				product_id: product_id
			}, (result) => {
				console.log('%c [ result ]-390', 'font-size:13px; background:pink; color:#bf2c9f;', result.data.data)
				this.carddata = result.data.data
				this.showcard = true
			})
		},

		//确认地区
		regionConfirm(e) {
			this.model.city = e.province.label + '/' + e.city.label + '/' + e.area.label;
		},
		getOrderList(id) {
			this._post_form('api/ykjp/sell/Sell/orderDetail', {
				id: id
			}, (result) => {
				result.data.data.createtime = this.transformTime(result.data.data.createtime);
				// this.setData({ 'orderList': result.data.data })
				this.rawOrderData = result.data.data
				this.model.customer_name = this.rawOrderData.customer_name
				this.model.customer_info_id = this.rawOrderData.customer_info_id
				this.model.code = this.rawOrderData.code
				this.model.sell_code = this.rawOrderData.code
				this.model.linkman = this.rawOrderData.linkman
				this.model.phone = this.rawOrderData.phone
				this.model.type = this.rawOrderData.type
				this.model.sell_id = this.rawOrderData.id//销售id 就是这个订单的id

				//截取空格前的字符串
				this.model.delivery_time = this.rawOrderData.delivery_time_text
				this.model.address = this.rawOrderData.address
				this.model.city = this.rawOrderData.city
				this.model.totalNums = this.rawOrderData.total_nums
				this.model.product = this.rawOrderData.productlist//商品

				console.log('%c [ this.model ]-436', 'font-size:13px; background:pink; color:#bf2c9f;', this.model)
				console.log('%c [ this.rawOrderData ]-476', 'font-size:13px; background:pink; color:#bf2c9f;', this.rawOrderData)




			});


		},
		/* 选择客户回调 */
		SelectSenUserConfirm(e) {
			this.model.customer_name = e[0].label
		},
		/* 选择日期回调 */
		delivery_timeChange(e) {
			this.model.delivery_time = e.result
			this.delivery_timetime = this.toTimeData(e.result) / 1000
		},
		/* 选择制单日期回调 */
		make_timeChange(e) {
			console.log('%c [ e ]-360', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.model.billing_time = e.result
		},
		/* 选择交货方式回调 */
		SelectSendTypeConfirm(e) {
			this.model.type = e[0].value
		},
		/* 选择销售单据回调 */
		sheetConfirm(e) {
			this.model.sell_code = e[0].label
		},
		openDeleteGoods(i) {
			const _this = this
			//删除商品弹窗
			uni.showModal({
				title: '提示',
				content: '是否删除商品',
				// #ifdef APP-PLUS
				showCancel: false,
				// #endif
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						_this.deleteGoods(i)
					}
				}
			})
		},
		deleteGoods(i) {
			console.log('%c [ i ]-370', 'font-size:13px; background:pink; color:#bf2c9f;', i)
			//删除商品
			this.model1.form.goods.splice(i, 1)
		},
		//预览图片
		openImg() {
			let imgsArray = this.model1.form.imgurl.split(',');
			uni.previewImage({
				current: 0,
				urls: imgsArray,
			});
		},
		//删除图片弹窗
		openDeleteImg() {
			const _this = this
			//弹框确认是否删除图片
			uni.showModal({
				title: '提示',
				content: '是否删除转款截图',
				// #ifdef APP-PLUS
				showCancel: false,
				// #endif
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						_this.deleteImgUrl()
					}
				}
			})
		},
		//删除图片
		deleteImgUrl() {
			this.model1.form.imgurl = ''
		},
		//选择图片
		choosePhoto() {
			const _this = this;
			uni.chooseImage({
				count: 1, //最多可以选择的图片张数，默认9
				sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				sizeType: ['original'],//original 原图，compressed 压缩图，默认二者都有
				success(res) {
					console.log('选择图片完成', res)
					// 调用上传图片的接口
					// _this.uploadPhoto(res.tempFilePaths);
					_this.model1.form.imgurl = res.tempFilePaths[0]
					console.log('%c [ res.tempFilePaths[0] ]-261', 'font-size:13px; background:pink; color:#bf2c9f;', res.tempFilePaths[0])
				},
				fail() {
					console.log('失败', err);
				},
				complete() {
					console.log('结束');
				},
			})
		},

		changeMoney() {
			console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.model1.form.ismoney = e
		},
		changePost() {
			console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.model1.form.post = e
		},
		changeAb(e) {
			console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.model1.form.isAssemble = e
		},
		selectProducer(e) {
			console.log('%c [ e ]-150', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.showProducer = false
			this.model1.form.producer = e.value[0]
		},
		// groupChange(n) {
		// 	console.log('groupChange', n);
		// },
		radioChange(n) {
			console.log('radioChange', n);
			this.radiovalue1 = n
		},
		selectData(e) {
			this.showData = false;
			console.log('%c [ e ]-76', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			//时间戳转日期
			let date = new Date(e.value)
			console.log('%c [ date ]-80', 'font-size:13px; background:pink; color:#bf2c9f;', date)

		},
		sexSelect(e) {
			this.model1.form.sex = e.name
			this.$refs.uForm.validateField('form.sex')
		},
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
};
</script>

<style lang="scss" scoped>
.goodsImg {
	width: 50px;
	height: 50px;

	img {
		width: 100%;
		height: 100%;
		background-size: cover;
	}
}

.sumbit {
	width: 100%;
	height: 88px;
	text-align: center;
	color: #fff;
	background: #ffffff;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;

	.btn {
		width: 250px;
		height: 40px;
		background-color: #3C9CFF;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
	}
}

.bgup {
	width: 174px;
	height: 300px;
	background: whitesmoke;
	position: relative;

	.guan {
		position: absolute;
		top: -20px;
		right: -20px;

	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.bg {
	text-align: center;
	width: 174px;
	height: 138px;
	background-image: url('');
	background-size: cover;


}

.zhuankuan {
	text-align: center;
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100;
}

.box {
	.selectCard {

		//背景遮罩


		.guanx {
			position: absolute;
			right: 20px;
			top: 20px;
		}

		padding: 20px;
		z-index: 999999;
		position: fixed;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		height: 50%;
		background: #fff;
		border-radius: 10px;

		.selectCardItem {
			margin-top: 40px;
			display: flex;
			gap: 20px;

			.item {
				display: flex;
				flex-direction: column;
			}
		}

	}

}

.switchtext {
	width: 50px;
	line-height: 25px;

}

.seebtn {
	width: 100;
	height: 20px;
	padding: 4px;
	text-align: center;
	background: #3C9CFF;
	color: #fff;
	margin-top: 10px;
	border-radius: 4px;

}

.cardbox {
	display: flex;
	gap: 20px;

	.left {
		img {
			width: 80px;
			height: 80px;
		}
	}

	.right {
		display: flex;
		flex-direction: column;
		gap: 10px;

		.title {
			display: flex;
			flex-direction: column;

		}
	}
}
</style>
